<!-- 查询包租佬电费查询 -->
<template>
	<el-drawer direction="rtl" v-model="dialogVisible" :title="dialogTitle" size="90%">
		<ContentWrap>
			<!-- 搜索工作栏 -->
			<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
				<el-form-item label="时间区间">
					<el-date-picker
						v-model="queryParams.successTime"
						type="daterange"
						:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
						value-format="YYYY-MM-DD"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期" />
				</el-form-item>
				<el-form-item>
					<el-button @click="handleQuery">
						<Icon icon="ep:search" class="mr-5px" />
						搜索
					</el-button>
				</el-form-item>
			</el-form>
		</ContentWrap>
		<!-- 列表 -->
		<ContentWrap>
			<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
				<el-table-column label="订单号" align="left" prop="orderId" width="300" />
				<el-table-column label="充值金额" align="center" prop="money" width="100">
					<template #default="scope">
						{{ divide(scope.row.money, 100) }}
					</template>
				</el-table-column>
				<el-table-column label="充值时间" align="center" prop="rechargeTime">
					<template #default="scope">
						{{ formatDate(scope.row.rechargeTime) }}
					</template>
				</el-table-column>
			</el-table>
			<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
		</ContentWrap>
	</el-drawer>
</template>
<script lang="ts" setup>
	import { getPayedPageOfMeter } from '@/api/zwsj/waterPayOrder'
	import { divide } from '@/utils/tools'
	import { formatDate } from '@/utils/formatTime'

	defineOptions({ name: 'WaterPayOrderQuery' })

	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
	const loading = ref(true) // 列表的加载中
	const total = ref(0) // 列表的总页数
	const list = ref() // 列表的数据

	const queryParams = reactive({
		pageNo: 1,
		pageSize: 10,
		waterId: undefined,
		startDay: undefined,
		endDay: undefined,
		dateScope: undefined,
		successTime: [],
	})

	/** 打开弹窗 */
	const open = async (waterId: number) => {
		loading.value = false
		dialogVisible.value = true
		dialogTitle.value = '中微-水表系统-充值查询'
		queryParams.waterId = waterId
		const currDate = new Date()
		let subDate = new Date()
		subDate.setDate(subDate.getDate() - 7)
		queryParams.successTime = [formatDate(subDate, 'YYYY-MM-DD'), formatDate(currDate, 'YYYY-MM-DD')]
		handleQuery()
	}
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗

	/** 查询部门列表 */
	const getList = async () => {
		loading.value = true
		queryParams.successTime = queryParams.successTime || []
		let timeLength = queryParams.successTime.length
		if (timeLength > 0) {
			queryParams.startDay = queryParams.successTime[0]
			if (timeLength > 1) {
				queryParams.endDay = queryParams.successTime[1]
			}
		}
		queryParams.dateScope = queryParams.startDay + ' - ' + queryParams.endDay
		const data = await getPayedPageOfMeter(queryParams)
		list.value = data?.msg ?? []
		total.value = data?.total ?? 0
		loading.value = false
	}

	/** 搜索按钮操作 */
	const handleQuery = () => {
		queryParams.pageNo = 1
		getList()
	}
</script>
